<template>
    <div>
        <el-card class="box-card">
            <el-form :inline="true" ref="memberFormData" :model="KeChengFormData" class="demo-form-inline" size="mini">
                <el-form-item label="课程名称:">
                    <el-input v-model="KeChengFormData.title" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="KeChengFormData.statu" placeholder="状态" style="width: 80px" clearable>
                        <el-option label="正常" value="0"></el-option>
                        <el-option label="禁用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否免费:">
                    <el-select v-model="KeChengFormData.price" placeholder="是否免费" style="width: 80px" clearable>
                        <el-option label="免费" value="0"></el-option>
                        <el-option label="收费" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上下架:">
                    <el-select v-model="KeChengFormData.status" placeholder="上下架" style="width: 80px" clearable>
                        <el-option label="上架" value="0"></el-option>
                        <el-option label="下架" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核状态:">
                    <el-select v-model="KeChengFormData.checkStatus" placeholder="审核状态" style="width: 80px" clearable>
                        <el-option label="审核通过" value="1"></el-option>
                        <el-option label="审核未通过" value="0"></el-option>
                        <el-option label="待审核" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-search" size="mini" @click="seachClass">查询</el-button>
                    <el-button type="success" icon="el-icon-refresh" size="mini" @click="resetClass">重置</el-button>
                </el-form-item>

            </el-form>

            <el-divider></el-divider>

            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="cover"
                        label="课程封面"
                        align="center"
                >
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" width="100px" height="30px">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="课程名称"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="subjectName"
                        label="课程分类"
                        align="center"
                        width="250px"
                >
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.price==0.00">免费</span>
                        <span v-else>价格: {{scope.row.price}}元</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="sxjia"
                        label="上下架"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#ff4949"
                                inactive-color="#13ce66"
                                active-text="下架"
                                inactive-text="上架"
                                @change="changesxjia(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="statu"
                        label="状态"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.statu"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#ff4949"
                                inactive-color="#13ce66"
                                active-text="禁用"
                                inactive-text="正常"
                                @change="changeSwitch(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="checkStatus"
                        label="审核状态"
                        align="center"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.checkStatus==0">未通过</span>
                        <span v-else>待审核</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="success"
                                @click="editClass(scope.row)">修改</el-button>
                        <el-button
                                size="mini"
                                type="primary"
                                @click="shenhe(scope.row)">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    title="编辑"
                    :visible.sync="editDialogVisible"
                    width="40%"
                    @closed="closeAddDialog"
            >
                <!--表单的数据绑定-->
                <el-form :model="editClassFormData"   label-width="70px" class="demo-ruleForm">
                    <el-form-item label="课程名称:" prop="mobile" label-width="100px" >
                        <el-input  type="text" v-model="editClassFormData.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否免费:" label-width="100px">
                        <template>
                            <el-radio v-model="editClassFormData.price" :label="1">收费</el-radio>
                            <el-radio v-model="editClassFormData.price" :label="0.00">免费</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="排序:" prop="sort" label-width="100px">
                        <el-input-number v-model="editClassFormData.sort" @change="handleChange" :min="1" :max="100" label="排序"></el-input-number>
                    </el-form-item>
                    <el-form-item label="课程简介:" prop="description" label-width="100px">
                        <el-input type="textarea" v-model="description" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="quxiao">取 消</el-button>
                <el-button type="primary" @click="queren" >确定</el-button>
            </span>
            </el-dialog>

            <el-dialog
                    :title="shenhetitle+'——信息审核'"
                    :visible.sync="shenheDialogVisible"
                    width="30%"
                    @closed="closeShenheDialog"
            >
                <!--表单的数据绑定-->
                <el-form ref="checkForm" :model="checkFormData"   label-width="70px" class="demo-ruleForm">
                    <el-form-item label="是否通过:" label-width="100px" prop="checkStatus">
                        <el-radio-group v-model="checkFormData.checkStatus">
                            <el-radio :label="1">通过</el-radio>
                            <el-radio :label="0">不通过</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="备注:" prop="checkContent" label-width="100px">
                        <el-input type="textarea" v-model="checkFormData.checkContent" autocomplete="off" placeholder="系统默认通过"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button  type="warning" plain @click="checkQuxiao">取 消</el-button>
                <el-button type="primary" @click="checkQueren" >确定</el-button>
            </span>
            </el-dialog>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "kechengshenhe",
        data(){
            return{
                checkFormData:{
                    courseId:null,
                    checkStatus:1,
                    checkContent:'',
                },
                shenhetitle:"",
                description:"",
                editClassFormData:{},
                editDialogVisible:false,
                shenheDialogVisible:false,
                KeChengFormData:{},
                tableData: [],
                currentPage: 1,
                pageSize:5,
                //总条数
                total:0,
            }
        },
        created(){
            this.init();
        },
        methods:{
            handleChange(val){},
            closeShenheDialog(){
                this.$refs.checkForm.resetFields();
                this.init();
            },
            closeAddDialog(){
                this.init();
            },
            shenhe(row){
                this.checkFormData.courseId=row.id;
                this.shenheDialogVisible=true;
                this.shenhetitle=row.title;
            },
            checkQuxiao(){
                // this.checkFormData={};
                this.$refs.checkForm.resetFields();
                this.shenheDialogVisible=false;
            },
            checkQueren(){
                var that=this;
                this.$http.post(`core/check/shenhe`,this.checkFormData).then(function (resp) {
                    that.shenheDialogVisible=false;
                })
            },
            queren(){
                var that=this;
                this.$http.post(`core/course/updateCourseAndDescription/${this.description}`,this.editClassFormData).then(function (resp) {
                    that.editDialogVisible=false;
                })
            },
            quxiao(){
                this.editDialogVisible=false;
                this.editClassFormData={};
            },
            changesxjia(row){
                var that=this;
                this.$http.post(`core/course/changesxjia`,row).then(function (resp) {

                })
            },
            changeSwitch(row){
                var that=this;
                this.$http.post(`core/course/changeStatu`,row).then(function (resp) {

                })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.init();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.init();
            },
            editClass(row){
                this.editDialogVisible=true;
                this.editClassFormData=row;
                var that=this;
                this.$http.post(`core/course/findDescriptionById/${row.id}`).then(function (resp) {
                    that.description=resp.data.result;
                })
            },
            seachClass(){
                this.init();
            },
            resetClass(){
                this.KeChengFormData={};

            },
            init(){
                var that=this;
                this.$http.post(`core/course/findCoursesByStatus/${this.currentPage}/${this.pageSize}`,this.KeChengFormData).then(function (resp) {
                    that.tableData=resp.data.result.records;
                    that.total=resp.data.result.total;
                })
            },
        }

    }
</script>

<style scoped>

</style>e>